<script setup lang="ts">
import { getObjValue } from '@/utils/util';
import ico5 from '@/assets/images/platformChart/ico_5.png';

defineProps<{
  segObj: any;
}>();
</script>
<template>
  <div class="rounded-xl bg-white shadow mt-3 pb-4">
    <div class="title-2 p-4">{{ segObj?.title || '-' }}</div>
    <div class="rounded-lg bg-[rgba(77,126,240,0.06)] mx-3">
      <div class="border-b border-[#EEEEEE] py-2 px-2 flex justify-between items-center">
        <div class="flex items-center">
          <van-image width="18" height="18" :src="ico5" />
          <span class="text-xs text-[#999] ml-1">总量</span>
        </div>
        <div class="title-1">{{ segObj?.zongliang || '-' }}</div>
      </div>
      <div class="flex items-center justify-between mx-2 py-2 border-b border-[#f6f6f6]">
        <div class="flex items-center">
          <span class="text-xs text-[#999] mr-3">{{ getObjValue(segObj?.data?.[0])[0] }}</span>
          <span class="font-medium">{{ getObjValue(segObj?.data?.[0])[1] }}</span>
        </div>
        <div class="flex items-center">
          <span class="text-xs text-[#999] mr-3">{{ getObjValue(segObj?.data?.[1])[0] }}</span>
          <span class="font-medium">{{ getObjValue(segObj?.data?.[1])[1] }}</span>
        </div>
      </div>
      <div class="py-3 flex items-center justify-between">
        <div class="ml-2">
          <div class="text-xs text-[#999] mr-3">{{ getObjValue(segObj?.data?.[2])[0] }}</div>
          <div class="title-2 text-[#326BF0]">{{ getObjValue(segObj?.data?.[2])[1] }}</div>
        </div>
        <div class="mr-2 pr-5">
          <div class="text-xs text-[#999] mr-3">{{ getObjValue(segObj?.data?.[3])[0] }}</div>
          <div class="title-2">{{ getObjValue(segObj?.data?.[3])[1] }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
